<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.js"></script>
</head>

<body class="container">
    <h2>内联元素和块级元素的转换</h2>
    <p>div显示为内联元素（一行排列）</p>
    <div class="d-inline bg-primary text-white">div——d-inline</div>
    <div class="d-inline m-5 bg-danger text-white">div——d-inline</div>
    <p>span显示为块级元素（独占一行）</p>
    <span class="d-block bg-success text-white">span——d-block</span>
    <span class="d-block bg-dark text-white">span——d-block</span>
</body>

</html>